<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@page import="java.util.*" import="com.happypets.model.PetBean" import="com.happypets.model.UserBean"%>
<%
	String path = request.getContextPath() + "/web";
%>
<!DOCTYPE html>
<html>
<head>
<title>happy pets</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"
	media="all">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="feng design" />
<script type="application/x-javascript">
	
	
	
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 



</script>
<script type="text/javascript" src="<%=path%>/js/move-top.js"></script>
<script type="text/javascript" src="<%=path%>/js/easing.js"></script>
<script type="text/javascript" src="js/cart.js"></script>
<script type="text/javascript" src="js/myModal.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event) {
			event.preventDefault();
			$('html,body').animate({
				scrollTop : $(this.hash).offset().top
			}, 1000);
		});
	});
</script>






<!-- start menu -->


</script>
<link href="<%=path%>/css/memenu.css" rel="stylesheet" type="text/css"
	media="all" />
<script type="text/javascript" src="<%=path%>/js/memenu.js"></script>
<script>
	$(document).ready(function() {
		$(".memenu").memenu();
	});
</script>
</head>
<body>

	<%
		//移除indexFlag使下一次进入主页仍首先通过servlet
		//session.removeAttribute("indexFlag");
	%>
	<!-- 复制头部部分 -->
	<!--top-header-->
	<div class="top-header">
		<div class="container">
			<div class="top-header-main">
				<div class="col-md-4 top-header-left">
					<div class="search-bar">
						<!-- --------search-----no---- -->
						<input type="text" id="keywordSearch" value="搜索"
							onfocus="this.value = '';"
							onblur="if (this.value == '') {this.value = '搜索';}"> <input
							type="submit" value="" onclick="keywordSearch()">
						<!-- --------end------------ -->
					</div>
				</div>
				<div class="col-md-4 top-header-middle">
					<a href="index.jsp"><img src="../images/logo.png" alt="" /></a>
				</div>
				<div class="col-md-4 top-header-right">
					<div class="cart box_1">


						<!-- --------------------------------------购物车与登录部分----------------------no--------------------------- -->
						<p>
						
						<%
							UserBean user = (UserBean)session.getAttribute("user");
							String userId = "0";
							if(user == null){
								
								%>
								<span id="login_in" class=" btn-lg" data-toggle="modal"
								data-target="#loginModal">登录</span>/ <span id="regist"
								class=" btn-lg" data-toggle="modal" data-target="#registModal">注册</span>
								<span><a data-target="#loginModal">
								<%}else{
									%>
										<a href="userInfo.jsp"class="btn"><span>
											<%=user.getUserName() %>
										</span></a><span class=" btn" id="exit-btn">退出</span><a href="checkout.jsp">
									<%
									userId = user.getUserId();
								}
						
						%>
							
									<h3>
										<div class="total">

											<span class="simpleCart_total">0</span> (<span
												id="simpleCart_quantity" class="simpleCart_quantity"></span>
											宠物)

										</div>
									</h3> <img src="../images/cart-1.png" alt="" />
							</a></span>
						</p>


						<p>
							<a href="javascript:;" class="simpleCart_empty">空购物车</a>
						</p>

						<script type="text/javascript">
							//初始化购物车
							cart_add(1,1,3,<%=userId%>,0);
						</script>

						<!-- ----------------------------------------------------end----------------------------------------------------->

						<div class="clearfix"></div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--top-header-->
	<!--bottom-header-->
	<div class="header-bottom">
		<div class="container">
			<div class="top-nav">
				<ul class="memenu skyblue">
					<li class="active"><a href="index.jsp">主页</a></li>
					<li class="grid"><a href="dogs.jsp?kind=1">狗狗</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1 me-one">
									<h4>大型犬</h4>
									<ul>
										<!--从数据库中读取前8条狗类图片-->
										<!-- 直接读取耗时，为了能修改还是建议从数据库中读取 -->
										<!-- 再次思考认为直接写死，后台修改 -->
										<!--  页面跳转到servlet-->
										<li><a href="products.html">藏獒</a></li>
										<li><a href="products.html">卡斯罗</a></li>
										<li><a href="products.html">罗威纳犬</a></li>
										<li><a href="products.html">阿拉斯加雪橇犬</a></li>
										<li><a href="products.html">法老王猎犬</a></li>
										<li><a href="dogs.jsp?kind=1">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>中型犬</h4>
									<ul>
										<li><a href="products.html">斑点狗</a></li>
										<li><a href="products.html">杜宾犬</a></li>
										<li><a href="products.html">哈士奇</a></li>
										<li><a href="products.html">灵缇</a></li>
										<li><a href="dogs.jsp?kind=1.jsp">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>小型犬</h4>
									<ul>
										<li><a href="products.html">吉娃娃</a></li>
										<li><a href="products.html">蝴蝶犬</a></li>
										<li><a href="products.html">北京犬</a></li>
										<li><a href="products.html">苏格兰梗</a></li>
										<li><a href="products.html">比格猎犬</a></li>
										<li><a href="products.html">拉萨犬</a></li>
										<li><a href="dogs.jsp">更多</a></li>
									</ul>
								</div>
							</div>
						</div></li>
					<li class="grid"><a href="dogs.jsp?kind=2">猫咪</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1 me-one">
									<h4>长毛猫</h4>
									<ul>
										<li><a href="products.html">波斯猫</a></li>
										<li><a href="products.html">布偶猫</a></li>
										<li><a href="products.html">伯曼猫</a></li>
										<li><a href="products.html">索马里猫</a></li>
										<li><a href="products.html">巴厘猫</a></li>
										<li><a href="dogs.jsp?kind=2">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>短毛猫</h4>
									<ul>
										<li><a href="products.html">中国狸花猫</a></li>
										<li><a href="products.html">埃及猫</a></li>
										<li><a href="products.html">俄罗斯蓝猫</a></li>
										<li><a href="products.html">孟买猫</a></li>
										<li><a href="dogs.jsp?kind=2">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>无毛猫</h4>
									<ul>
										<li><a href="products.html">斯芬克斯猫</a></li>
										<li><a href="products.html">加拿大无毛猫</a></li>
										<li><a href="dogs.jsp?kind=2">更多</a></li>
									</ul>
								</div>
							</div>
						</div></li>
					<li class="grid"><a href="single.html">鸟类</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1 me-one">
									<h4>鸣禽</h4>
									<ul>
										<li><a href="products.html">New Arrivals</a></li>
										<li><a href="products.html">Men</a></li>
										<li><a href="products.html">Women</a></li>
										<li><a href="products.html">Accessories</a></li>
										<li><a href="products.html">Kids</a></li>
										<li><a href="products.html">login</a></li>
										<li><a href="products.html">Brands</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>宠物鸟</h4>
									<ul>
										<li><a href="products.html">Men</a></li>
										<li><a href="products.html">Women</a></li>
										<li><a href="products.html">Brands</a></li>
										<li><a href="products.html">Kids</a></li>
										<li><a href="products.html">Accessories</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>观赏鸟</h4>
									<ul>
										<li><a href="products.html">Levis</a></li>
										<li><a href="products.html">Persol</a></li>
										<li><a href="products.html">Nike</a></li>
										<li><a href="products.html">Edwin</a></li>
										<li><a href="products.html">New Balance</a></li>
										<li><a href="products.html">Jack & Jones</a></li>
										<li><a href="products.html">Paul Smith</a></li>
										<li><a href="products.html">Ray-Ban</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
							</div>
						</div></li>
					<li class="grid"><a href="dogs.html">其它</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1 me-one">
									<h4>昆虫</h4>
									<ul>
										<li><a href="products.html">蜘蛛</a></li>
										<li><a href="products.html">螳螂</a></li>
										<li><a href="products.html">蝎子</a></li>
										<li><a href="products.html">蜗牛</a></li>
										<li><a href="products.html">蚯蚓</a></li>
										<li><a href="products.html">蜥蜴</a></li>
										<li><a href="products.html">龙虾</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>鱼类</h4>
									<ul>
										<li><a href="products.html">青鱼</a></li>
										<li><a href="products.html">草鱼</a></li>
										<li><a href="products.html">金鱼</a></li>
										<li><a href="products.html">中华鲟</a></li>
										<li><a href="products.html">扬子鳄</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>奇葩宠物</h4>
									<ul>
										<li><a href="products.html">蟒蛇</a></li>
										<li><a href="products.html">剑齿虎</a></li>
										<li><a href="products.html">长颈鹿</a></li>
										<li><a href="products.html">狮子</a></li>
										<li><a href="products.html">蓝鲸</a></li>
										<li><a href="products.html">企稳</a></li>
										<li><a href="products.html">普氏野马</a></li>
										<li><a href="products.html">黑曼巴</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
							</div>
						</div></li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!--bottom-header-->
	<!-- 复制部分结束 -->



	<!-- 头部最开始的图片 -->
	<!--banner-starts-->
	<div class="bnr" id="home">
		<div id="top" class="callbacks_container">
			<ul class="rslides" id="slider4">
				<li><a href="dogs.jsp"><div class="banner-1"></div></a></li>
				<li><a href="#"><div class="banner-2"></div></a></li>
				<li><a href="dogs.jsp?kind=2"><div class="banner-3"></div></a></li>
			</ul>
		</div>
		<div class="clearfix"></div>
	</div>
	<!--banner-ends-->
	<!--Slider-Starts-Here-->
	<script src="js/responsiveslides.min.js"></script>
	<script>
		// You can also use "$(window).load(function() {"
		$(function() {
			// Slideshow 4
			$("#slider4").responsiveSlides({
				auto : true,
				pager : true,
				nav : false,
				speed : 500,
				namespace : "callbacks",
				before : function() {
					$('.events').append("<li>before event fired.</li>");
				},
				after : function() {
					$('.events').append("<li>after event fired.</li>");
				}
			});

		});
	</script>
	<!--End-slider-script-->



	<!-- 头部两个商品 -->

	<!--start-banner-bottom-->

	<%
		List<PetBean> twoShowPets = (List<PetBean>) session.getAttribute("petBeanes");

		PetBean pet01 = twoShowPets.get(0);
		PetBean pet02 = twoShowPets.get(1);
		System.out.println("flag:" + pet01.getAddress());
	%>


	<div class="banner-bottom">
		<div class="container">
			<div class="banner-bottom-top">
				<div class="col-md-6 banner-bottom-left">
					<div class="bnr-one">
						<div class="bnr-left">

							<!-- 姓名 -->
							<h1>
								<a href="dog.jsp?id=<%=pet01.getId()%>"><%=pet01.getName()%></a>
							</h1>
							<!-- 简介 -->
							<p>
								颜色：<%=pet01.getColor() + "<br/>原产地：" + pet01.getAddress()%></p>
							<div class="b-btn">
								<!-- 链接 -->
								<a href="dog.jsp?id=<%=pet01.getId()%>">详细信息</a>
							</div>

						</div>
						<div class="bnr-right">
							<!-- 链接 图片 -->
							<a href="dog.jsp?id=<%=pet01.getId()%>"><img
								src="../images/<%=pet01.getImage1()%>" alt="" height="150px"
								width="200px" /></a>

						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-md-6 banner-bottom-right">
					<div class="bnr-two">
						<div class="bnr-left">
							<!-- 姓名 -->
							<h2>
								<a href="dog.jsp?id=<%=pet02.getId()%>"><%=pet02.getName()%></a>
							</h2>
							<!-- 简介 -->
							<p>
								颜色：<%=pet02.getColor() + "<br/>原产地：" + pet02.getAddress()%></p>
							<div class="b-btn">
								<!-- 链接 -->
								<a href="dog.jsp?id=<%=pet02.getId()%>">详细信息</a>
							</div>

						</div>
						<div class="bnr-right">
							<!-- 链接 图片 -->
							<a href="dog.jsp?id=<%=pet02.getId()%>"><img
								src="../images/<%=pet02.getImage1()%>" alt="" height="150px"
								width="200px" /></a>

						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--end-banner-bottom-->



	<!-- -----------------------------------------------------内容开始--------------------------------------------------------------- -->

	<!-- 下面是商品列表 -->

	<!--start-shoes-->
	<div class="shoes">
		<div class="container">
			<div class="product-one">

				<%
					List<PetBean> dogs = (List<PetBean>) session.getAttribute("dogs");
					int dogSize = dogs.size();
					int temp = 4;
					if (dogSize < 4) {
						temp = dogSize;
					}
					for (int i = 0; i < temp; i++) {
						//循环显示宠物
						PetBean dog = dogs.get(i);
				%>

				<div class="col-md-3 product-left">
					<div class="p-one simpleCart_shelfItem">
						<a href="dog.jsp?id=<%=dog.getId()%>"> <img
							src="../images/<%=dog.getImage1()%>" alt="" height="150px"
							width="200px" />
							<div class="mask">
								<span>详 细 信 息</span>
							</div>
						</a>
						<h4><%=dog.getName()%></h4>
						<p>
							<!-- 宠物id，数量，标志，用户id，价格 -->
							<!-- 设置判断特价 -->
							<% if(dog.getMark()==1){
								%>
								<a class="item_add" href="#"
								onclick="cart_add(<%=dog.getId()%>,1,1,<%=userId %>,<%=dog.getSpecialPrice()%>)"><span
								style="display: none"><%=dog.getId()%></span><i></i> <span
								class=" item_price">￥<%=dog.getNowPrice()%></span></a>
								<%
								} else{
									%>
									<a class="item_add" href="#"
									onclick="cart_add(<%=dog.getId()%>,1,1,<%=userId %>,<%=dog.getNowPrice()%>)"><span
									style="display: none"><%=dog.getId()%></span><i></i> <span
									class=" item_price">￥<%=dog.getNowPrice()%></span></a>
									<%
								}%>
						</p>
					</div>
				</div>

				<%
					if (i % 4 == 3) {
							//换行
				%>
				<div class="clearfix"></div>
				<%
					}

					}
				%>
				<div class="clearfix"></div>

				<!-- 下一页处理 -->
				<div class="b-btn" align="center">
					<a href="dogs.jsp"> 更多汪星人 </a>
				</div>

			</div>




			<div class="product-one">
				<%
					List<PetBean> cats = (List<PetBean>) session.getAttribute("cats");
					int catSize = cats.size();
					temp = 4;
					if (catSize < 4) {
						temp = catSize;
					}
					for (int i = 0; i < temp; i++) {
						//循环显示宠物
						PetBean cat = cats.get(i);
				%>
				<div class="col-md-3 product-left">
					<div class="p-one simpleCart_shelfItem">

						<a href="dog.jsp?id=<%=cat.getId()%>"> <img
							src="../images/<%=cat.getImage1()%>" alt="" height="150px"
							width="200px" />
							<div class="mask">
								<span>详 细 信 息</span>
							</div>
						</a>
						<h4><%=cat.getName()%></h4>
						<p>
							<a class="item_add" href="#"><i></i> <span
								class=" item_price">￥<%=cat.getNowPrice()%></span></a>
						</p>

					</div>
				</div>
				<%
					}
				%>
				<div class="clearfix"></div>

				<!-- 下一页处理 -->
				<div class="b-btn" align="center">
					<a href="dogs.jsp?kind=2"> 更多喵星人 </a>
				</div>
			</div>
		</div>

	</div>
	<!--end-shoes-->


	<br />

	<!-- 单独介绍一些商品 -->

	<!--start-abt-animal-->
	<div class="abt-shoe">
		<div class="container">
			<div class="abt-shoe-main">

				<%
					List<PetBean> birds = (List<PetBean>) session.getAttribute("birds");
					int birdSize = birds.size();
					temp = 3;
					if (birdSize < 3) {
						temp = birdSize;
					}
					for (int i = 0; i < temp; i++) {
						//循环显示宠物
						PetBean bird = birds.get(i);
				%>

				<div class="col-md-4 abt-shoe-left">
					<div class="abt-one">
						<a href="dog.jsp?id=<%=bird.getId()%>"><img
							src="../images/<%=bird.getImage1()%>" alt="" height="200px"
							width="200px" /></a>
						<h4>
							<a href="single.html"><%=bird.getName()%></a>
						</h4>
						<p>
							<%
								//介绍部分进行缩减
									String intr = bird.getIntroduce();
									if (intr.length() > 100) {
										intr = intr.substring(0, 80) + "...";
									}
							%><%=intr%></p>
					</div>
				</div>

				<%
					}
				%>

				<div class="clearfix"></div>

			</div>
		</div>
	</div>
	<!--end-abt-shoe-->



	<!-- --------------------------------------------------------中间部分结束--------------------------------------------------------------------- -->



	<!-- 复制尾部部分 -->

	<!--start-footer-->
	<div class="footer">
		<div class="container">
			<div class="footer-top">
				<div class="col-md-3 footer-left">
					<h3>关于我们</h3>
					<ul>
						<li><a href="#">了解我们</a></li>
						<li><a href="contact.html">意见建议</a></li>
						<li><a href="#">博客</a></li>
						<li><a href="#">团队</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>帐户</h3>
					<ul>
						<li><a href="account.html">您的帐户</a></li>
						<li><a href="#">个人信息</a></li>
						<li><a href="contact.html">收货地址</a></li>
						<li><a href="#">快递追踪</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>购物指南</h3>
					<ul>
						<li><a href="#">订单查询</a></li>
						<li><a href="#">配送费收取标准</a></li>
						<li><a href="#">在线自助退货</a></li>
						<li><a href="#">帮助</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>爱宠种类</h3>
					<ul>
						<li><a href="#">狗狗</a></li>
						<li><a href="#">猫咪</a></li>
						<li><a href="#">小鸟</a></li>
						<li><a href="#">鱼类</a></li>
						<li><a href="#">其它</a></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--end-footer-->
	<!--end-footer-text-->
	<div class="footer-text">
		<div class="container">
			<div class="footer-main">
				<p class="footer-class">
					© 2015 Happy Pets All Rights Reserved | Design by <a
						href="http://fengshaohua.sinaapp.com/" target="_blank">FENG</a>
				</p>
			</div>
		</div>
		<script type="text/javascript">
			$(document).ready(function() {
				/*
				var defaults = {
					containerID: 'toTop', // fading element id
					containerHoverID: 'toTopHover', // fading element hover id
					scrollSpeed: 1200,
					easingType: 'linear' 
				};
				 */

				$().UItoTop({
					easingType : 'easeOutQuart'
				});

			});
		</script>
		<a href="#home" id="toTop" class="scroll" style="display: block;">
			<span id="toTopHover" style="opacity: 1;"> </span>
		</a>
	</div>
	<!--end-footer-text-->
	
	<div id="userId" style="display:none"><%=userId %></div>

	<jsp:include page="modal.html"></jsp:include>
	<!-- 尾部结束 -->
	
</body>
</html>